<template>
    <div class="login">
        <div class="login-top">
            <div class=" title-centen">
                <div class="title"><span>登录界面</span></div>
                <div class="img"></div>
            </div>
        </div>
        <div class="login-cente">
            <div class="trsfrom-round">
                <img src='../../assets/images/d.png' />
            </div>
            <div class="login-box">
                <div class="box-center">
                    <n-form ref="formRef" :model="formValue" :rules="rules" label-placement="left">
                        <n-form-item path="user.usename">
                            <n-input v-model:value="formValue.user.usename" placeholder="请输入账号" />
                        </n-form-item>
                        <n-form-item path="user.pwd">
                            <n-input v-model:value="formValue.user.pwd" type="password" show-password-on="mousedown"
                                placeholder="请输入密码" />
                        </n-form-item>
                        <n-form-item>
                            <div class="from-btn">
                                <n-button @click="handleValidateClick">
                                    登录
                                </n-button>
                            </div>
                        </n-form-item>
                        <!-- <div class="reg-btn"><span>注册</span></div> -->
                    </n-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { login } from '../../api/login.js'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import { useMessage } from 'naive-ui'
const message = useMessage()
import { getPermissionListMenu } from '../../api/user.js'
import { generateRoute, formatData } from '../../utils/common'
export default defineComponent({
    setup() {
        const route = useRouter()
        const formRef = ref(null)
        const store = useStore()
        // const message = useMessage()
        const formValue = reactive({
            user: {
                usename: '',
                pwd: ''
            },
        })
        const rules = reactive({
            user: {
                usename: {
                    required: true,
                    trigger: 'blur',
                    message: '请输入账号'
                },
                pwd: {
                    required: true,
                    trigger: 'blur',
                    message: '请输入密码'
                }
            },
        })

        const methods = reactive({
          
        })
     const handleValidateClick=  (e: MouseEvent) => {
                e.preventDefault()
                formRef.value.validate((err) => {
                    if (err) {
                        console.log(11111)
                    } else {
                        login(formValue.user).then((res: any) => {
                            if (res.data) {
                                message.error(res?.data?.msg)
                                return
                            }
                             store.dispatch('saveuserInfo', res)
                             store.commit('setMyToken', res.token)
                          getPermissionListMenu().then(item => {
                                    let routers = generateRoute(item)
                                    routers.map(routekey => {
                                        let url = `./../${routekey.component}.vue`
                                        routekey.component = () => import( /* @vite-ignore */`${url}`);
                                        //@ts-ignore
                                        route?.addRoute('layout', routekey)
                                    })
                                   route.push('/layout')
                                })
                        })
                    }
                })

            }

        return {
            formRef,
            ...toRefs(methods),
            formValue,
            rules,
            handleValidateClick

        }
    }
})
</script>

<style lang="scss">
@media only screen and (max-width: 750px) {
    .trsfrom-round {
        display: none;
    }

    .login-box {
        width: 650px !important;
        height: 700px !important;

        .box-center {
            width: 500px !important;
        }
    }
}

.login {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../../assets/images/bj.jpg') no-repeat center center;
    background-size: 100% 100%;
    overflow: hidden;

    .login-top {

        .title-centen {
            margin: 0 auto;
            color: #fff;
            // height: 200px;
            width: 100%;
            position: relative;

            .title {
                // height: 50px;
                position: relative;
                padding-top: 10px;
                width: 50%;
                margin: 0 auto;
                text-align: center;

                span {
                    position: absolute;
                    font-size: 25px;
                    display: inline-block;
                    left: 50%;
                    top: 85%;
                    transform: translateX(-50%);
                }
            }

            .img {
                height: 100px;
                width: 50%;
                background: url('../../assets/images/head.gif') no-repeat center center;
                background-size: 100%;
                margin: 0 auto;
            }
        }
    }

    .login-cente {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .trsfrom-round {
            width: 300px;

            img {
                width: 100%;
                -webkit-transform: rotate(360deg);
                animation: ballBox 15s linear infinite;
                -moz-animation: ballBox 15s linear infinite;
                -webkit-animation: ballBox 15s linear infinite;
                -o-animation: ballBox 15s linear infinite;
            }

            @keyframes ballBox {
                from {
                    transform: rotate(20deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }
        }

        .login-box {
            width: 280px;
            height: 300px;
            position: relative;
            background-image: url('../../assets/images/e.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;

            .box-center {
                width: 200px;
                height: 25px;
                position: absolute;
                top: 34%;
                transform: translateY(-34%);

                .n-input-wrapper {
                    background: rgba($color: #010A16, $alpha: 0.9) !important;
                }

                .n-input__input {
                    input {
                        color: #00EAFF;
                    }
                }

                .from-btn {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin: 0 auto;

                    button {
                        width: 100%;
                        background: #00EAFF;
                        border: none;
                    }
                }

                .reg-btn {
                    position: relative;
                    color: #00EAFF;

                    span {
                        position: absolute;
                        top: -10px;
                        cursor: pointer;
                    }
                }
            }

        }
    }


}
</style>